<!doctype html>
<html>
<head>
<title>Pencil Code Directory</title>
<meta charset="utf-8">
<style>
@import url("//fonts.googleapis.com/css?family=Lato:400|Source+Code+Pro:400");
* {box-sizing:border-box;}
body {margin:0;padding:0;font:24px/28px "Lato";font-weight:400;overflow:hidden}
#top{position:absolute;top:0;left:0;right:0;width:100%;height:56px;
  table-layout:auto;overflow:hidden;max-height:56px;border-spacing:0}
#topleft,#topright{padding:0 12px;height:56px;vertical-align:middle;
  overflow:hidden;}
#topright{text-align:right;width:1%;}
#topright button,#overlay button{border:none;background-color:white;
  box-shadow:0 0 7px gray;color:black;
  border-radius:8px;font-family:inherit;font-size:16px;line-height:18px;
  font-weight:400;vertical-align:middle;height:28px;
  padding:2px 8px;margin:5px;display:inline-block;}
#topright button[disabled],#overlay button[disabled] {
  box-shadow:0 0 7px lightgray;color:lightgray;}
#topright button:not([disabled]):hover,#overlay button:not([disabled]):hover {
  box-shadow:0 0 7px black}
#owner,#filename,#icon{display:inline-block;vertical-align:middle;
  color:saddlebrown;max-width:90%;max-height:56px;overflow:hidden;
  word-break:break-all;white-space:normal;}
#owner{color:black;}
#icon {display:inline-block;height:32px;width:32px;}
.panetitle{position:absolute;top:56px;height:8px;background:lightgray;
  padding:0 12px;color:white;letter-spacing:2px;border-left:1px solid white;
  border-right:1px solid white;}
.pane{position:absolute;top:64px;bottom:0;background:whitesmoke;
  border-left:1px solid white;border-right:1px solid white;z-index:0;}
.full{left:0;width:100%;}
#middle{z-index:1;display:none;}
#middle,.vcenter{position:absolute;left:50%;top:50%}
#middle > div{margin:0 -50%;}
.hcenter{margin:-50% -50%;}
.panetitle,#owner{user-select:none;-webkit-user-select:none;
  -moz-user-select:none;cursor:default;}
#owner:hover{text-decoration:underline;}
.directory{height:100%;overflow:auto;}
.directory .column{display:inline-block;float:left;margin-top:12px;}
.directory .item{display:inline-block;float:left;clear:left;
  text-decoration:none;
  padding:0 28px 0 12px;min-height:28px;color:blue;cursor:pointer}
.directory .create {color:mediumseagreen;white-space:nowrap;}
.directory .create:hover {text-decoration:underline;}
.directory .item:hover{text-decoration:underline;}
.loading{box-shadow:0 0 7px gray;width:32px;height:32px;border-radius:16px;background-position:center;background-repeat:no-repeat;opacity:0.7;background-color:white;background-image:url();}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="notification"><div><div></div></div></div>
<div id="middle"><div></div></div>
<table id="top" width="100%"><tr><td id="topleft"><nobr><span id="owner"><script>
document.write(location.host.replace(/\.[^.]*.{7}$/, ''));
</script></span><div id="icon"></div><script>
function htmlEscape(s){return s.replace(/[<>&]/g,function(c){return
c=='<'?'&lt;':c =='>'?'&gt;':'&amp;';});}
document.write('<span id="filename">' +
htmlEscape(location.pathname.replace(/^\/(?:[^\/]*\/)?|\/$/g, '')) +
'</span>');
</script></nobr></td>
<td id="topright"><nobr id="buttonbar">
<button id="edit">Edit</button>
</nobr></td></tr></table>
<div id="bravotitle" class="full panetitle"></div>
<div id="bravo" class="full pane"
><div class="vcenter"><div class="hcenter"
><div class="loading"></div></div></div></div>
<script src="//pencilcode.net/lib/jquery.js"></script>
<script>
(function() {

$('#edit').click(function() {
  window.location.href =
    window.location.pathname.replace(/^\/[^\/]*\/|.*/, '/edit/');
});

var domain = location.hostname.replace(/(?:(.*)\.)?([^.]*.{8})$/, '$2'),
    ownername = location.hostname.replace(/(?:(.*)\.)?[^.]*.{8}$/, '$1');


$('#done').click(function() {
  var parent =
     window.location.pathname.replace(/\/[^\/]+\/?$/, '');
  if (parent.indexOf('/', 1) < 0) {
    window.location.href = '//' + domain + '/';
    return;
  }
  var slashed = parent + (parent[parent.length - 1] == '/' ? '' : '/')
  window.location.href = slashed;
});

$('#owner').click(function() {
  var root = window.location.pathname.replace(/^\/([^\/]+)\/.*$/, '/$1/');
  window.location.href = root;
});

var getScrollbarWidth = function() {
  var div, width = getScrollbarWidth.width;
  if (width === undefined) {
    div = document.createElement('div');
    div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
    div = div.firstChild;
    document.body.appendChild(div);
    width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
    document.body.removeChild(div);
  }
  return width;
};

function fwidth(elem) {
  // Get the width, including fractional width.
  if (elem.getBoundingClientRect) {
    return elem.getBoundingClientRect().width;
  }
  return $(elem).outerWidth();
}

function setPaneLinkText(list) {
  var j, col, items, width, maxwidth, colcount, colsize, colnum,
      tightwidth, item, directory, tag, colsdone;
  $('#bravo').html('');
  directory = $('<div class="directory"></div>').appendTo('#bravo');
  width = Math.floor(fwidth(directory.get(0))) - getScrollbarWidth();
  col = $('<div class="column"></div>').appendTo(directory);
  for (j = 0; j < list.length; j++) {
    tag = list[j].href ? 'a' : 'div';
    item = $('<' + tag + ' class="item"'
        + (list[j].href ? ' href="' + list[j].href + '" ' : '')
        + '>' + list[j].html + '</' + tag + '>')
        .appendTo(col);
    if (list[j].link) {
      item.data('link', list[j].link);
    }
  }
  items = directory.find('.item');
  maxwidth = 0;
  for (j = 0; j < items.length; j++) {
    maxwidth = Math.max(maxwidth, Math.ceil(fwidth(items.get(j))));
  }
  colcount = Math.min(items.length, Math.floor(width / Math.max(1, maxwidth)));
  colsize = items.length;
  while (colcount < items.length) {
    // Attempt shorter columns from colcount + 1 (or colsize - 1 if shorter).
    colsize = Math.min(colsize - 1, Math.ceil(items.length / (colcount + 1)));
    tightwidth = 0;
    colsdone = 0;
    for (colnum = 0; colnum * colsize < items.length; colnum++) {
      maxwidth = 0;
      for (j = colnum * colsize;
           j < items.length && j < (colnum + 1) * colsize; j++) {
        maxwidth = Math.max(maxwidth, Math.ceil(fwidth(items.get(j))));
      }
      tightwidth += maxwidth;
      colsdone += 1;
      if (tightwidth > width) { break; }
    }
    if (tightwidth > width) { break; }
    colcount = colsdone;
    if (colsize <= 1) { break; }
  }
  colsize = Math.ceil(items.length / colcount);
  for (colnum = 1; colnum <= colcount; colnum++) {
    col = $('<div class="column"></div>').appendTo(directory);
    for (j = colnum * colsize;
         j < items.length && j < (colnum + 1) * colsize; j++) {
      items.eq(j).appendTo(col);
    }
  }
}

var links = [];
var backend = (ownername ? ownername + '.' : '') + domain;

$.getJSON('//' + backend +
    '/load/' + window.location.pathname.replace(/^\/[^\/]+\//, ''),
function(m) {
  if (!m.directory) {
    $('#done').trigger('click');
    return;
  }
  var filenameslash = location.pathname.replace(/^\/(?:[^\/]*\/)?|\/$/g, '');
  if (filenameslash) { filenameslash += '/'; }
  if (!ownername) {
    links = [];
    for (var j = 0; j < m.list.length; ++j) {
      if (m.list[j].mode.indexOf('d') < 0) { continue; }
      var label = m.list[j].name;
      var href = '//' + label + '.' + domain + '/home/';
      links.push({html:label, href:href});
    }
  } else {
    links = [];
    for (var j = 0; j < m.list.length; ++j) {
      var label = m.list[j].name;
      if (m.list[j].mode.indexOf('d') >= 0) { label += '/'; }
      var href = '/home/' + filenameslash + label;
      links.push({html:label, href:href});
    }
  }
  setPaneLinkText(links);
}).error(function() {
  $('#done').trigger('click');
});

var working = null;
$(window).on('resize', function() {
  if (!working) {
    working = setTimeout(function() {
       working = null;
       setPaneLinkText(links);
    }, 100);
  }
});


})();
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45359764-1', 'pencilcode.net');
ga('send', 'pageview');
</script>
</body>
</html>


